<template>
  <div>
    <el-row :gutter="12" style="margin-top: 20px">
      <el-col :span="6">
        <el-card shadow="always" style="text-align: center">
          <UserFilled
            style="
              width: 1.2em;
              height: 1.2em;
              margin: 0 auto;
              color: #ffffff;
              background-color: #409eff;
              border-radius: 50%;
              padding: 10px;
            "
          ></UserFilled>
          <h2 style="line-height: 5px;">{{userNum}}</h2>
          <p  style="font-size: 12px;color: #c4c3c4;">{{userType}}</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="text-align: center">
          <Histogram
            style="
              width: 1.2em;
              height: 1.2em;
              color: #ffffff;
              background-color: #67c23c;
              border-radius: 50%;
              padding: 10px;
            "
          ></Histogram>
          <h2 style="line-height: 5px;">{{chatNum}}</h2>
          <p style="font-size: 12px;color: #c4c3c4;">{{chatType}}</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="text-align: center">
          <Grid
            style="
              width: 1.2em;
              height: 1.2em;
              color: #ffffff;
              background-color: #f56d6c;
              border-radius: 50%;
              padding: 10px;
            "
          ></Grid>
          <h2 style="line-height: 5px;">{{gridNum}}</h2>
          <p  style="font-size: 12px;color: #c4c3c4;">{{gridType}}</p>

        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="text-align: center">
          <Promotion
            style="
              width: 1.2em;
              height: 1.2em;
              color: #ffffff;
              background-color: #e8a342;
              border-radius: 50%;
              padding: 10px;
            "
          ></Promotion>
          <h2 style="line-height: 5px;">{{moneyNum}}</h2>
          <p  style="font-size: 12px;color: #c4c3c4;">{{moneyType}}</p>

        </el-card>
      </el-col>
    </el-row>
    <div id="container"></div>
  </div>
</template>

<script>
import {
  UserFilled,
  Histogram,
  Grid,
  Promotion
} from '@element-plus/icons-vue'
import { Chart, registerInteraction } from '@antv/g2'
registerInteraction('element-link', {
  start: [
    { trigger: 'interval:mouseenter', action: 'element-link-by-color:link' }
  ],
  end: [
    { trigger: 'interval:mouseleave', action: 'element-link-by-color:unlink' }
  ]
})
export default {
  components: {
    UserFilled,
    Histogram,
    Grid,
    Promotion
  },
  data () {
    return {
      userNum: 112356,
      userType: '总用户数',
      chatNum: 66789,
      chatType: '总课程数',
      gridNum: 12357,
      gridType: '总订单数',
      moneyNum: 99899.12,
      moneyType: '总收入'
    }
  },
  created () {
  },
  mounted () {
    this.echart()
  },
  methods: {
    echart () {
      const userNum = this.userNum
      const chatNum = this.chatNum
      const gridNum = this.gridNum
      const moneyNum = this.moneyNum

      const data = [
        { year: '2014', type: '总用户数', sales: userNum / 2 },
        { year: '2015', type: '总用户数', sales: userNum / 3 },
        { year: '2016', type: '总用户数', sales: userNum / 5 },
        { year: '2017', type: '总用户数', sales: userNum / 20 },
        { year: '2014', type: '总课程数', sales: chatNum },
        { year: '2015', type: '总课程数', sales: chatNum / 2 },
        { year: '2016', type: '总课程数', sales: chatNum / 3 },
        { year: '2017', type: '总课程数', sales: chatNum / 4 },
        { year: '2014', type: '总订单数', sales: gridNum * 2 },
        { year: '2015', type: '总订单数', sales: gridNum * 4 },
        { year: '2016', type: '总订单数', sales: gridNum * 3 },
        { year: '2017', type: '总订单数', sales: gridNum / 1 },
        { year: '2014', type: '总收入', sales: moneyNum / 4 },
        { year: '2015', type: '总收入', sales: moneyNum / 3 },
        { year: '2016', type: '总收入', sales: moneyNum - 2000 },
        { year: '2017', type: '总收入', sales: moneyNum }
      ]
      // eslint-disable-next-line no-return-assign
      data.forEach((item) => [
        this.userNum = item.sales
      ])
      const newChat = document.getElementById('container')
      const chart = new Chart({
        container: newChat,
        autoFit: true,
        width: 300,
        height: 300
      })

      chart.data(data)
      chart.scale({
        sales: {
          // max: 100000,
          // tickInterval: 600,
          nice: true
        }
      })

      chart.tooltip({
        showMarkers: false
      })

      chart
        .interval()
        .position('year*sales')
        .color('type')
        .adjust('stack')

      chart.interaction('element-highlight-by-color')
      chart.interaction('element-link')

      chart.render()
    }
  }
}
</script>

<style scoped lang="scss">
#container{
  width: 700px !important;
  height: 400px;
  margin-top: 30px;
}
</style>
